<div nz-row></div>
<nz-content class="main-content">
  <div nz-row>
    <div nz-col nzSpan="18">
      <widget-button-group
        [buttonsConfig]="buttonConfigService.buttonsConfig"
      ></widget-button-group>
    </div>
    <div nz-col nzSpan="6" style="float: right">
      <nz-input-group nzSearch [nzSize]="theme.size" [nzAddOnAfter]="suffixButton">
        <input
          *ngIf="!showSearchPanel"
          type="text"
          nz-input
          placeholder="查询"
          [(ngModel)]="list.filter"
        />
      </nz-input-group>
      <ng-template #suffixButton>
        <button
          nz-button
          [nzSize]="theme.size"
          nzSearch
          (click)="showSearchPanel = !showSearchPanel"
          class="list-search"
        >
          <i nz-icon [nzType]="showSearchPanel ? 'left' : 'down'" nzTheme="outline"></i>
        </button>
      </ng-template>
    </div>
  </div>
  <div nz-row *ngIf="showSearchPanel">
    <div nz-col nzSpan="18">查询条件输入区域</div>
  </div>
  <div nz-row class="form-list">
    <nz-list nzBordered [nzSize]="theme.size">
      <nz-list-header>
        <div nz-row>
          <div nz-col nzFlex="0 0 40px">
            <label
              nz-checkbox
              [ngModel]="isAllSelected"
              [nzIndeterminate]="indeterminate"
              (ngModelChange)="targetAllSelect()"
            ></label>
          </div>
          <div nz-col nzFlex="1">租户名称</div>
          <div nz-col nzFlex="0 0 120px">操作</div>
        </div>
      </nz-list-header>
      <nz-list-item
        *ngFor="let model of models; let i = index; trackBy: trackByFn"
        [ngClass]="{ 'list-item-selected': isModelSelected(model) }"
        (click)="targetModelSelect(model)"
      >
        <div nz-row>
          <div nz-col nzFlex="0 0 40px">
            <label
              nz-checkbox
              [ngModel]="isModelSelected(model)"
              (ngModelChange)="targetModelSelect(model)"
            ></label>
          </div>
          <div nz-col nzFlex="1">
            <a (click)="view(model, $event)">{{ model.name }}</a>
          </div>
          <div nz-col nzFlex="0 0 120px">
            <div>
              <a (click)="view(model, $event)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="editFeatures(model, $event)">功能管理</a>
            </div>
          </div>
        </div>
      </nz-list-item>
    </nz-list>
  </div>
  <div nz-row class="form-alert">
    <nz-alert
      *ngIf="selectedCount > 0"
      nzType="info"
      [nzMessage]="multactions"
      nzShowIcon
    ></nz-alert>
    <ng-template #multactions>
      共选中 <b>{{ selectedCount }}</b> 条记录
      <nz-button-group nzSize="small" class="form-multactions">
        <button nz-button nzType="primary" nzGhost (click)="clearSelect()">取消</button>
      </nz-button-group>
    </ng-template>
  </div>
  <div nz-row nzJustify="end" class="form-pagination">
    <nz-pagination
      [(nzPageIndex)]="currentPage"
      [nzTotal]="totalCount"
      nzShowSizeChanger
      [(nzPageSize)]="maxResultCount"
      [nzShowTotal]="paginationTotalTemplate"
      [nzPageSizeOptions]="[10, 15, 30, 50, 100]"
    ></nz-pagination>
    <ng-template #paginationTotalTemplate let-total> 共 {{ total }} 条记录 </ng-template>
  </div>
</nz-content>
